<template>
  <div class="common-layout">
    <el-container>
      <el-header>

        <div>
                    <span @click="back1()">
                        <Back class="b1" style="width: 2em; height: 2em;" />
                    </span>
        </div>
        <div class="txt1">
          <h5>我加入的拼车</h5>
        </div>

      </el-header>
      <el-main>
        <el-card>
          加入行程详情
          <el-divider />

          <el-descriptions title="" :column="1" size="small">
            <el-descriptions-item>
              <template v-slot:label>
                行程路线
              </template>
              {{ data1.route }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                出发时间
              </template>
              {{ data1.startDate + data1.startTime }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="" :column="2" size="small">
            <el-descriptions-item>
              <template v-slot:label>
                已拼{{ data1.adcVehicleTrip.num_passengers }}人/{{ data1.adcVehicleTrip.max_seat_capacity }}座
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                {{ data1.price }}元/位
              </template>
            </el-descriptions-item>
          </el-descriptions>

          <el-divider />

          <el-descriptions title="" :column="1" size="small">
            <el-descriptions-item>
              <template v-slot:label>
                车牌号
              </template>
              {{ data1.adcVehicleTrip.vehicle_license }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                司机姓名
              </template>
              {{ data1.adcVehicleTrip.name }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="" :column="2" size="small">
            <el-descriptions-item>
              <template v-slot:label>
                司机电话
              </template>
              {{ data1.adcVehicleTrip.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <el-button :icon="PhoneFilled" @click="call()">联系司机</el-button>
              </template>
            </el-descriptions-item>
          </el-descriptions>
          &nbsp;
          <el-descriptions title="" :column="2" size="small">
            <el-descriptions-item>
              <template v-slot:label>
                我的位置 {{ address }}
              </template>
              {{ 你好 }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <el-button :icon="Promotion" />
              </template>
            </el-descriptions-item>
          </el-descriptions>


          <el-button class="b2" @click="back2()">退出本次行程</el-button>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
  import { Back, PhoneFilled, Promotion } from '@element-plus/icons-vue'
  import { useRoute } from 'vue-router'
  import { ref, onMounted, onScopeDispose } from 'vue'
  import service from '@/utils/request'
  import { useUsersStore } from "../stores/user";
  const store = useUsersStore()
  const {address}=store
  const route = useRoute();
  const id=ref('')
  const data1 = ref({
    route: '',
    startTime: '',
    startDate: '',
    passengerTripNumPassengers: '',
    price: '',
    vehicleTripId: '',
    adcVehicleTrip: {
      num_passengers: '',
      max_seat_capacity: '',
      name: '',
      phone: '',
      vehicle_license: '',
    }
  })

  //查询页面基本信息
  const queryById = () => {
    service.get(`/passenger-trip/passengerTrip/${id.value}`)
            .then(res => {
              if (res.success == true) {
                data1.value = res.data
                console.log(res.data)
              }
            })
  }

  //加载页面后挂载
  onMounted(() => {
    console.log(route.query.childrenImf)
    id.value = route.query.childrenImf
    queryById()
  });


  //回到主页
  const back1 = () => {
    router.push('/search')
  }


  //联系司机
  const call = () => {
    alert("正在拨号")
  }



  //取消本次行程
  const back2 = () => {
    service.delete(`/passenger-trip/passengerTrip/${id}/delete`, {
    })
            .then(res => {
              if (res.success == true) {
                service.put(`/passenger-trip/passengerTrip/${data1.value.vehicleTripId}/${data1.value.passengerTripNumPassengers}/update`)
                        .then(result => {
                          if (result.success) {
                            router.push('/search')
                          }
                        })
              }
            })
  }
</script>


<style scoped>
  .common-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
  }


  h2 {
    margin-left: 40%;
  }


  .b1 {
    padding-top: 3%;
  }

  .el-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
  }

  .txt1 {
    margin-right: 35%;
  }

  .b1:hover {
    cursor: pointer;
  }

  .el-header {
    background-color: #a0cfff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .b2 {
    margin-left: 50%;
    margin-top: 40%;
  }

  .el-card {
    height: 100%;
  }
</style>